<template>
    <div class="process-record" :class="{'is-visible': recordList.length && visible}">
        <div class="process-record__scroller">
            <div 
                class="process-record__item" 
                v-for="item in recordList" 
                :key="item.id"
                @click="handleRecordClick(item)"
            >
                <div class="legend" :class="[resolveRecordCircle(item.name)]">
                    <span class="title">{{ item.name }}</span>
                    <span class="tag" v-if="item.tag">{{ item.tag }}</span>
                    <span class="arrow"></span>
                </div>
                <div class="content">
                    <div class="time">{{ parseTime(item.createTime, '{y}-{m}-{d}') }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { parseTime } from '@/utils';

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },

    landData: {
        type: Object,
        default: {}
    }
})

const emit = defineEmits(['onRecordClick'])

const recordList = computed(() => {
    return props.landData?.list || [];
})

function resolveRecordCircle(val) {
    /* 			
        * 供前审批（蓝）、供中交易（橙）、供后监管（红）
        * 1、供前审批（蓝）：确权登记，入市动议，入市申请，入市方案
        * 2、供中交易（橙）：入市公告，成交公示，合同签署，使用权登记
        * 3、供后监管（红）：违约记录，
        */
    const colorMap = [{
            name: '确权登记',
            cls: 'blue'
        },
        {
            name: '入市动议',
            cls: 'blue'
        },
        {
            name: '入市申请',
            cls: 'blue'
        },
        {
            name: '入市方案',
            cls: 'blue'
        },
        {
            name: '入市公告',
            cls: 'orange'
        },
        {
            name: '成交公示',
            cls: 'orange'
        },
        {
            name: '合同签署',
            cls: 'orange'
        },
        {
            name: '使用权登记',
            cls: 'orange'
        },
        {
            name: '违约记录',
            cls: 'red'
        }
    ];

    let name = val;
    if (val) {
        const tmp = name.split(':');
        name = tmp[0];
    }

    return colorMap.find(item => item.name === name)?.cls || 'blue';
}

// 点击单条记录
function handleRecordClick(itemData) {
    emit('onRecordClick', itemData);
}
</script>

<style lang="scss" scoped>
.process-record {
    min-width: 140px;
    max-width: 160px;
    transform: translateX(-140px);
    opacity: 0;
    border: 1px solid #FFFFFF;
    background: rgba(255, 255, 255, 0.6);
    padding: 10px 5px 10px 10px;
    transition: all .3s;

    &__scroller {
        height: 160px;
        transition: all .3s;
        overflow-y: auto;
        &::-webkit-scrollbar-thumb {
            background-color: #e1e6ec;
        }

        &::-webkit-scrollbar-thumb:hover {
            background-color: rgba(144, 147, 153, 0.5);
        }
    }

    &__item {
        position: relative;

        .legend {
            display: flex;
            align-items: center;
            padding-left: 18px;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                width: 10px;
                height: 10px;
                background: #FFFFFF;
                border-radius: 50%;
                border-style: solid;
                border-width: 2px;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }

            .title {
                font-size: 13px;
                color: #333;
                font-weight: 600;
                margin-right: 4px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .tag {
                padding: 1px 4px;
                border: solid 1px rgba(238, 72, 68, 0.60);
                background-color: rgba(255, 238, 237, 1);
                border-radius: 4px;
                color: #EE4844;
                font-size: 12px;
                margin-right: 6px;
            }

            .arrow {
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 6px;
                border-color: transparent transparent transparent #A8B0BC;
            }

            &.red {
                &::before {
                    border-color: #EE4844;
                }
            }

            &.orange {
                &::before {
                    border-color: #FE9611;
                }
            }

            &.blue {
                &::before {
                    border-color: #1890FF;
                }
            }
        }

        .content {
            padding: 10px 18px 15px;
            position: relative;

            &::after {
                content: '';
                position: absolute;
                width: 1px;
                left: 6px;
                top: -5px;
                bottom: 0;
                border-left: dashed 1px #AAB3C0;
            }

            .time {
                font-size: 12px;
                color: #7C869C;
            }
        }
    }

    &.is-visible {
        opacity: 1;
        transform: translateX(0);
    }
}
</style>